<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0 ">
    <link rel="stylesheet" href="bootstrap.css">
    <link rel="stylesheet" href="mysite.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <title>bootstrap</title>
</head>

<body>
    <div class="container">
        <h1 class="dispaly-1">标题 1 <mark><small>fubaoti</small></mark></h1>
        <h1 class="display-2">标题 2</h1>
        <h2 class="dispaly-2"><abbr title="suo xie">sx</abbr></h2>
        <blockquote class="blockquote">我要引用一段话</blockquote>
        <p class="blockquote-footer">this is normal,与上面的有啥不同</p>
        <blockquote>
            <p>块引用包括引用的内容和引用的脚</p>
            <footer class="blockquote-footer">this is a footer.</footer>
        </blockquote>
        <dl>
            <dt>dl是define list 定义列表</dt>
            <dd>dt是define title定义标题项， dd是define data 定义数据项</dd>
            <dd>先有列表再有标题，最后再有数据；即 dl dt dd </dd>
        </dl>

        <p>code 就是用来显示一段或一个代码用的,他是内联元素</p>
        <code>span</code> <code>p</code>

        <p>keyborad是键盘的意思，用kbd这个标签就真的像一个键盘按键一样了</p>
        <p><kbd>p</kbd></p>

        <p>pre元素可定义为预格式化文本，或保留换行和空格</p>
        <pre class="font-weight-bolder">
                 床前明月光，
                 疑是地上霜。
                 举头望明月，
                 低头思故乡。
            </pre>

        <p class="text-nowrap">
            text-justify是啥，是文本对齐，超出文本的部分自动换行,text-justify是啥，是文本对齐，超出文本的部分自动换行,text-justify是啥，是文本对齐，超出文本的部分自动换行,text-justify是啥，是文本对齐，超出文本的部分自动换行
        </p>
        <table class="table text-primary table-striped table-bordered table-sm table-hover">
            <thead class="thead-dark">
                <th>数字1</th>
                <th>数字2</th>
                <th>数字3</th>
            </thead>
            <tbody>
                <tr>
                    <td>123</td>
                    <td>456</td>
                    <td>789</td>
                </tr>
                <tr>
                    <td>321</td>
                    <td>654</td>
                    <td>987</td>
                </tr>
            </tbody>
        </table>

        <p>图片</p>
        <div>
            <img src="b-1.jpg" alt="orange" class="rounded-circle img-thumbnail float-left img-fluid"
                style="width: 500px; height: 500px;">
        </div>
        <div class="jumbotron jumbotron-fluid">
            <div class="container"></div>
        </div>

        <div>
            <div class="alert alert-success alert-dismissible">
                <button class="close fade show" type="button" data-dismiss="alert">&times;</button>
                信息<a class="alert-link" href="#">提示</a>
            </div>

            <div class="alert alert-warning">警告提示框,yellow</div>
            <div class="alert alert-danger">危险提示框，失败提示框，红色</div>
            <div class="alert alert-primary">重要的信息操作，首先，湖蓝色</div>
            <div class="alert alert-secondary alert-dismissible">
                <button class="close" data-dismiss="alert">&times;</button>信息提示框
            </div>
            <div class="alert alert-dark">深灰色<a class="alert-link" href="#">提示框</a></div>
            <div class="alert-info">sfdgb</div>

        </div>

        <h2>btn</h2>
        <button type="button" class="btn btn-outline-success btn-lg btn-block" disabled>btn</button>

        <h2>按钮组</h2>
        <div class="btn-group">
            <!-- <button type="button" class="btn btn-primary">1</button> -->
            <button type="button" class="btn btn-secondary dropdown-toggle-split" data-toggle="dropdown">2</button>
            <div class="btn-group">
                <button type="button" class="btn btn-dark dropdown-toggle" data-toggle="dropdown"></button>
                <div class="dropdown-menu">
                    <a href="#" class="dropdown-item">6</a>
                    <a href="#" class="dropdown-item">6</a>
                </div>
            </div>
        </div>

        <div class="badge badge-danger badge-pill">badge</div>
        <span class="badge badge-info badge-pill">badge</span>
        <span class="badge badge-success badge-pill">badge</span>
        <button class="badge badge-dark badge-pill" type="button">message
            <span class="badge badge-light">4</span>
        </button>

        <h2>进度条</h2>
        <div class="progress" style="height: 40px;">
            <div class="progress-bar bg-success progress-bar-striped progress-bar-animated" style="width: 20%;">70%
            </div>
        </div>
        <br>

        <div class="progress">
            <div class="progress-bar progress-bar-striped bg-warning" style="width: 78%;">78%</div>
            <div class="progress-bar progress-bar-striped bg-success" style="width: 10%;">10%</div>
            <div class="progress-bar progress-bar-striped badge-light progress-bar-animated bg-info"
                style="width: 10%;">10%</div>
        </div>

        <h2>分页</h2>
        <ul class="pagination pagination-sm">
            <li class="page-item"><a class="page-link" href="#">previous</a></li>
            <li class="page-item disabled"><a class="page-link" href="#">1</a></li>
            <li class="page-item"><a class="page-link" href="#">2</a></li>
            <li class="page-item active"><a class="page-link" href="#">3</a></li>
            <li class="page-item"><a class="page-link" href="#">next</a></li>
        </ul>

        <ul class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">previous</a></li>
            <li class="breadcrumb-item disabled"><a href="#">1</a></li>
            <li class="breadcrumb-item"><a href="#">2</a></li>
            <li class="breadcrumb-item active"><a href="#">3</a></li>
            <li class="breadcrumb-item"><a href="#">next</a></li>
        </ul>

        <h2>列表组</h2>
        <ul class="list-group">
            <li class="list-group-item active">1</li>
            <li class="list-group-item disabled">2</li>
            <li class="list-group-item">3</li>
        </ul>
        <br>

        <div class="list-group">
            <a href="#" class="list-group-item active list-group-item-action list-group-item-success">1</a>
            <a href="#" class="list-group-item list-group-item-action list-group-item-warning">2</a>
            <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">3</a>
        </div>

        <h2>卡片</h2>
        <div class="card">
            <div class="card-header card-title">头部</div>
            <div class="card-body card-text">
                <h4 class="title">title</h4>
                <p class="card-text">some example</p>
                <a href="#" class="card-link">444</a>
                <a href="#" class="card-link">888</a>
            </div>
            <div class="card-footer">底部</div>
        </div>

        <br><br><br>
        <div class="card">

            <div class="card-body card-img-overlay">
                <h2 class="card-text"></h2>
                <p>yftguhjikl</p>
            </div>
            <img src="b-1.jpg" alt="tupian" height="400px" class="card-img-bottom">
        </div>

        <h2>下拉菜单</h2>
        <div class="dropdown">
            <button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" type="button"
                id="dropdownMenuLink">jjj</button>
            <div class="dropdown-menu">
                <div class="dropdown-header" aria-labelledby="dropdownMenuLink">biaoti</div>
                <a href="#" class="dropdown-item dropdown-header">1</a>
                <a href="#" class="dropdown-item disabled">2</a>
                <a href="#" class="dropdown-item active">3</a>
                <div class="dropdown-divider"></div>
                <a href="#" class="dropdown-item">4</a>
            </div>
        </div>

        <h2>折叠</h2>
        <button class="btn btn-danger" data-toggle="collapse" data-target="#id">zhede</button>
        <div class="collapse show" id="demo">dfghjklsdfpokjoiguidkfjk</div>

        <div>
            <div class="card">
                <div class="card-header"></div>
                <div></div>
                <div class="card-body"></div>
            </div>
        </div>

        <h2>导航</h2>
        <ul class="nav justify-content-between nav-pills nav-justified">
            <li class="nav-item"><a href="#" class="nav-link">link</a></li>
            <li class="nav-item"><a href="#" class="nav-link active">link</a></li>
            <li class="nav-item"><a href="#" class="nav-link">link</a></li>
        </ul>

        <ul class="nav nav-pills nav-justified">
            <li class="nav-item">1</li>
            <li class="nav-item dropdown">
                <a href="#" class="dropdown-toglle" data-toggle="dropdown">dropdown</a>
                <div class="dropdown-menu">
                    <a href="#" class="dropdown-item"></a>
                    <a href="#" class="dropdown-item"></a>
                    <a href="#" class="dropdown-item"></a>
                </div>
            </li>
            <li class="nav-item">3</li>
        </ul>

        <h2>动态选项卡</h2>
        <ul class="nav nav-pills">
            <li class="nav-item"><a href="item1" class="nav-link" data-toggle="tab">item1</a></li>
            <li class="nav-item"><a href="item2" class="nav-link" data-toggle="tab">item2</a></li>
        </ul>

        <div class="tab-content">
            <div id="item1" class="tab-pane">
                <h4>item1</h4>
                <p>dshjildjfh</p>
            </div>

            <div id="item2" class="tab-pane">
                <h4>item2</h4>
                <p>dsifhuiisd</p>
            </div>
        </div>

        <h2>响应式导航栏</h2>
        <nav class="navbar navbar-expand-lg nav-pills">
            <ul class="navbar-nav">
                <li class="nav-item"><a href="" class="nav-link">1</a></li>
                <li class="nav-item"><a href="" class="nav-link active">2</a></li>
                <li class="nav-item"><a href="" class="nav-link">3</a></li>
            </ul>

        </nav>

        <nav class="navbar navbar-expand-sm bg-info navbar-dark">
            <form class="form-inline">
                <input type="text" class="form-control" placeholder="search">
                <button class="btn btn-success" type="button">search</button>
            </form>
        </nav>

        <nav class="navbar navbar-expand-sm bg-dark">
            <form class="form-inline">
                <div class="input-group">
                    <span class="input-group-addon">&</span>
                    <input type="text" placeholder="Username" class="form-control">
                </div>
            </form>
        </nav>

        <h2>导航栏文本</h2>
        <nav class="navbar-text navbar bg-dark navbar-expand-lg">
            <ul class="navbar-nav">
                <li class="nav-item"><a href="#" class="nav-link">link 1</a></li>
                <li class="nav-item"><a href="#" class="nav-link">link 2</a></li>
            </ul>
            <span class="navbar-text">Navbar text</span>
        </nav>
        <!-- 
            <form class="navbar-text">
                <a href="#" class="">link1</a>
                <a href="#" class="">link2</a>

                <div class="">Navbar text</div>

            </form> -->

        <h2>输入框组</h2>
        <input type="text" placeholder="Username">
        <input type="text" placeholder="Your Email">





    </div>
</body>

</html>